<!-- 个人中心 -->
<template>
	<view class="page">
		<view>
			<view class="navbar-box">
				<u-navbar back-icon-color="#fff" :title="title" :border-bottom="border" :background="background"></u-navbar>
			</view>
			<star></star>
			<u-swiper indicator-pos="bottomRight" height="440" :autoplay="false" border-radius="0" :list="avatarList"></u-swiper>
			<view class="page-bg" :style="[bgStyle]">
				<view class="user-center">
					<view v-if="!user.invite">
						<view class="edit-btn" @click="apply" v-if="chat_flag == 1">
							<u-icon name="chat-fill"></u-icon>
							<view class="btn-text">打招呼</view>
						</view>
					</view>
					<view v-else>
						<view class="edit-btn" @click="addWechat" v-if="chat_flag == 1">
							<u-icon name="weixin-fill"></u-icon>
							<view class="btn-text">加微信</view>
						</view> 
					</view>
					<view class="avatar-box" @click="previewImage(user.avatar)">
						<u-avatar size="large" :src="user.avatar"></u-avatar>
						<view class="vip-box" v-if="user.isPay == '1'">
							<u-icon name="xianxinghuiyuan" custom-prefix="iconfont"></u-icon>
							<view class="vip-text">贵{{user.coinLevel}}</view>
						</view>
					</view>
					<view class="user-info">
						<view class="nickname-box">
							<view class="nickname">{{user.nickName}}</view>
						</view>
						<view class="id-card" @click="copyText(user.friendId)">ID:{{user.friendId}}</view>
						<view class="sign-name">{{user.signName}}</view>
						<view class="sex-box">
							<view class="sex-tab">
								<u-icon v-if="user.sex == '0'" name="nan" size="22" color="#7261f1" custom-prefix="iconfont"></u-icon>
								<u-icon v-else name="nv" size="26" color="#a68aaf" custom-prefix="iconfont"></u-icon>
								<view class="age">{{user.age}}</view>
							</view>
							<view>
								<u-line length="22rpx" margin="10px" direction="col"></u-line>
							</view>
							<view class="sex-tab" v-if="user.city == null">
								未知
							</view>
							<view class="sex-tab" v-else>
								{{user.city}}
							</view>
							<view>
								<u-line length="22rpx" margin="10px" direction="col"></u-line>
							</view>
							<view class="sex-tab">
								{{user.distance}}km
							</view>
						</view>
						<view class="fans-box">
							<view class="fans-tab">
								<view class="fans-num">{{user.fansNum}}</view>
								<view class="fans-text">粉丝</view>
							</view>
							<view>
								<u-line length="26rpx" margin="10px" direction="col"></u-line>
							</view>
							<view class="fans-tab">
								<view class="fans-num">{{user.heartNum}}</view>
								<view class="fans-text">关注</view>
							</view>
						</view>
					</view>
				</view>
				<view class="page-box" :style="[cricleStyle]">
					<view class="wrap">
						<u-sticky :h5-nav-height="navHeight" :offset-top="offsetTop" @fixed="dd" @unfixed="df">
							<view class="top-box">
								<view class="u-tabs-box">
									<u-tabs-swiper activeColor="#303133" inactive-color="#82848a" bar-width="20" ref="tabs" :list="tabs" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
								</view>
							</view>
						</u-sticky>
						<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
							<swiper-item class="swiper-item">
								<scroll-view class="scroll-view">
									<ziliao :user="user" :albumList="albumList"></ziliao>
								</scroll-view>
							</swiper-item>
							<swiper-item class="swiper-item">
								<scroll-view class="scroll-view" :scroll-top="scrollTop" :scroll-y="scrollY" @scrolltolower="onreachBottom" @scroll="scroll">
									<hot :userId="userId" @menu="menu" @goTop="goTop" ref="hot"></hot>
								</scroll-view>
							</swiper-item>
						</swiper>
					</view>
				</view>
				
			</view>
			
		</view>
		
		<u-action-sheet :list="sheetList" v-model="sheetShow" @click="clickSheet"></u-action-sheet>
		<coin-popup></coin-popup>
		<user-pay></user-pay>
		<user-auth></user-auth>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import hot from "./hot.vue"; // 推荐
	import ziliao from "./ziliao.vue"; // 资料
	import gx from "./guanxi.vue"; // 关系
	import {mapState} from 'vuex';
	export default {
		components: {
			hot,
			ziliao,
			gx,
		},
		data() {
			return {
				color: this.$u.color['primary'],
				background: {
					backgroundColor: 'unset',
				},
				title: '',
				border: false,
				tabs: [{
					name: '资料'
				}, {
					name: '动态'
				}],
				user: {
					nickName: '未知',
					signName: 'TA很神秘，什么也没留下'
				},
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				scrollTop: 0,
				scrollTopX: 0,
				top: 300,
				scrollY: false,
				position: '',
				bgPosition: '',
				offsetTop: 0,
				navHeight: 44,
				userId: 0,
				albumList: [],
				avatarList: [{
					image: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220630/baed6039eed74a6d828b0835fab265f5.jpeg',
				}],
				sheetList: [],
				sheetShow: false,
			}
		},
		onLoad(option) {
			this.userId = option.userId;
			this.init();
		},
		onShow: function () {
			/* var _this = this;
			// 定时器实现3秒钟后显示
			setTimeout(function () {
			  // 在适合的场景显示插屏广告
			  _this.$utils.videoAdShow()
			  .then((res) => {
			    if (res) {
			  	// 成功
			  	console.log('广告观看完成，领取奖励')
			    } else {
			  	console.log('广告提前退出')
			    }
			  })
			  .catch((err) => {
			  	console.log('广告加载失败')
			  });  
			}, 1000); */
		},
		onShareAppMessage(res) {
			return {
				title: '送你一个对象，快来「处CP」吧！',
				path: '/pages/index',
				imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
			};
		},
		onShareTimeline() {
			return {
				title: '送你一个对象，快来「处CP」吧！',
				path: '/pages/index',
				imageUrl: 'http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220914/58242695c2a8421b892eced5f1bd3b15.jpeg',
			};
		},
		computed: {
			...mapState(['vuex_user','chat_flag']),
			// 加载中圆圈动画的样式
			cricleStyle() {
				let style = {};
				style.position = this.position;
				style.top = this.top + 'rpx';
				return style;
			},
			bgStyle() {
				let style = {};
				style.position = this.bgPosition;
				return style;
			},
		},
		methods: {
			init() {
				//加载插屏广告
				//this.$utils.insertVideoAdInit("adunit-e37cc8156d6be8a9");
				// #ifdef H5
				this.navHeight = 44;
				this.offsetTop = 0;
				// #endif
				// #ifdef MP
				this.navHeight = 0;
				uni.getSystemInfo({
					success: (res) => {
						const menuButton = uni.getMenuButtonBoundingClientRect() // 胶囊
						const navBarPadding = (menuButton.top - res.statusBarHeight) * 2
						const statusBarHeight = res.statusBarHeight //状态栏高度
						const navHeight = menuButton.height + navBarPadding // nav高度
						const headerHeight = navHeight + statusBarHeight // 总高度
						console.log(statusBarHeight, navHeight, headerHeight, ) // 20 40 60 iphone6/7/8
						this.offsetTop = headerHeight * 2;
					}
				});
				// #endif
				this.getUserInfo();
			},
			copyText(text){
			    uni.setClipboardData({
			        data: text+"" ,
			        success: function (res) {
						console.log('复制的信息：',text );
						uni.showToast({
							 title: '复制成功',
						});
			        }
			    });        
			},
			previewImage(url) {
				var imgList = [];
				imgList.push(url);
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: imgList, //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					indicator: 'number',
					loop: true
				});
			},
			getUserInfo() {
				this.$u.get('/system/user/getUserInfoById',{
					userId: this.userId,
				}).then(res => {
					this.user = res.user;
					this.getImageList(this.user);
				})
			},
			logout() {
				uni.setStorageSync("token", '');
			},
			getImageList(user) {
				var avatarList = [];
				if(user.albums != null && user.albums != ''){
					var albumList = user.albums.split(',');
					this.albumList = albumList;
				}
			},
			dd() {
				this.border = true;
				this.title = this.user.nickName;
				this.background.backgroundColor = '#fff';
				this.scrollY = true;
			},
			df() {
				this.border = false;
				this.title = '';
				this.background.backgroundColor = 'unset';
				this.scrollY = false;
			},
			editBtn() {
				this.$u.route({
					url: 'packgeMine/pages/me/edit',
				});
			},
			publish() {
				this.$u.route({
					url: 'packgeMine/pages/me/publish',
				});
			},
			edit() {
				this.$u.route({
					url: 'packgeMine/pages/me/edit',
				});
			},
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 推荐
			onreachBottom(e) {
				this.$refs.hot.load();
			},
			// 推荐
			onreachBottomX(e) {
				this.$refs.guanxi.load();
			},
			scroll(e) {
				/* this.$nextTick(function(){
					var scrollTop = e.detail.scrollTop;
					this.top = this.top - scrollTop;
					if(scrollTop > 0){
						this.top = 88 + 88;
						this.border = true;
						this.title = '陈神';
						this.position = 'absolute';
						this.bgPosition = 'unset';
						this.background.backgroundColor = '#fff';
					}
					if(scrollTop < 10){
						this.border = false;
						this.title = '';
						this.position = 'unset';
						this.bgPosition = 'absolute';
						this.background.backgroundColor = 'unset';
					}
				}); */
			},
			scrollX(e) {
				/* this.$nextTick(function(){
					var scrollTop = e.detail.scrollTop;
					this.top = this.top - scrollTop;
					if(scrollTop > 0){
						this.top = 88 + 88;
						this.border = true;
						this.title = '陈神';
						this.position = 'absolute';
						this.bgPosition = 'unset';
						this.background.backgroundColor = '#fff';
					}
					if(scrollTop < 10){
						this.border = false;
						this.title = '';
						this.position = 'unset';
						this.bgPosition = 'absolute';
						this.background.backgroundColor = 'unset';
					}
				}); */
			},
			clickSheet(sheet) {
				this.$refs.hot.clickSheet(sheet);
			},
			menu(e) {
				this.sheetList = e;
				this.sheetShow = true;
			},
			apply() {
				this.$u.post('/wq/friendApply/add',{
					userId: this.userId,
				}).then(res => {
					var roomId = res.data.roomId;
					this.$u.route({
						url: 'packgeMine/pages/chat/chat',
						params: {
							roomId: roomId,
						}
					});
				});
			},
			getAmount() {
				this.$u.get('/pay/userCoin/getAmount').then(res => {
					this.$u.vuex('vuex_amount', res.data);
				});
			},
			addApply() {
				this.$u.post('/wq/friendApply/addWechat',{
					userId: this.userId,
				}).then(res => {
					this.getAmount();
					this.$u.route({
						url: 'packgeMine/pages/index/chat',
						params: {
							applyId: res.data.id,
						}
					});
				});
			},
			addWechat() {
				this.judgeVipNum((res) => {
					if(res.wechatNum > 0){
						this.addVipApply();
					}else{
						this.addApply();
					}
				});
			},
			addApply() {
				this.$u.post('/wq/friendApply/addWechat',{
					userId: this.userId,
				}).then(res => {
					this.getAmount();
					this.$u.route({
						url: 'packgeMine/pages/chat/chat',
						params: {
							roomId: res.data.roomId,
						}
					});
				});
			},
			addVipApply() {
				this.$u.post('/wq/friendApply/addVipWechat',{
					userId: this.userId,
				}).then(res => {
					this.$refs.uToast.show({
						title: '剩余'+res.wechatNum+'次',
						type: 'success',
						duration: 1000,
						url: 'packgeMine/pages/chat/chat?roomId='+res.roomId
					});
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-box {
		position: absolute;
	}
	.page-bg {
		background-color: #fff;
		position: absolute;
		top: 400rpx;
		width: 100%;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top) - 94px + 100px + 170px);
		width: 100%;
	}
	.swiper-box {
		flex: 1;
	}
	.swiper-item {
		height: 100%;
	}
	.scroll-view {
		height: 100%;
		width: 100%;
		background-color: #f9f8f8;
	}
	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 10px;
		position: relative;
		background-color: #fff;
	}
	.u-tabs-box {
		width: 50%;
	}
	.page-box {
		width: 100%;
		background: #fff;
		z-index: 9;
	}
	.avatar-box {
		position: absolute;
		position: absolute;
		top: -20px;
		left: 30rpx;
	}
	.user-info {
		padding: 30rpx;
		margin-top: 90rpx;
	}
	.nickname {
		font-size: 34rpx;
		font-weight: bolder;
	}
	.sign-name {
		font-size: 24rpx;
		margin-bottom: 10px;
	}
	.id-card {
		font-size: 24rpx;
		color: #82848a;
		margin-bottom: 10px;
	}
	.sex-box {
		display: flex;
		align-items: center;
		line-height: 20px;
		height: 20px;
		margin-bottom: 20px;
		font-size: 24rpx;
	}
	.sex-tab {
		display: flex;
		align-items: center;
		font-size: 24rpx;
	}
	.age {
		margin-left: 5px;
	}
	.fans-box {
		display: flex;
		align-items: center;
		line-height: 20px;
		height: 20px;
	}
	.fans-tab {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #82848a;
	}
	.fans-num {
		font-size: 32rpx;
		margin-right: 3px;
		color: black;
	}
	.weui-cell:after {
	    content: " ";
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    right: 0;
	    height: 1px;
	    border-bottom: 1px solid #e5e5e5;
	    color: #e5e5e5;
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    -webkit-transform: scaleY(0.5);
	    transform: scaleY(0.5);
	    z-index: 2;//看情况使用
	}
	.edit-btn {
		background-color: #ffb0d5;
		position: absolute;
		top: 15px;
		right: 15px;
		padding: 6px 15px;
		border-radius: 20px;
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
	}
	.btn-text {
		margin-left: 5px;
	}
	.nickname-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	.vip-box {
		color: #fff;
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		background: #f7ce05;
		padding: 6rpx;
		border-radius: 20px;
		margin-right: 10px;
		position: absolute;
		top: 100rpx;
		left: 10rpx;
		width: 110rpx;
	}
	.vip-text {
		font-size: 20rpx;
	}
</style>
